<template>
  <view class="classificationSearch pagecon">
    <head-box :titles="groupData.title"></head-box>

    <div class=" lists">
      <div class="abc">
        <view class="conclude-title">热门搜索</view>
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation show-scrollbar>
          <view
              class="filter-item"
              @click="swichNavCurrent1(item,index)"
              v-for="(item, index) in list1"
              :key="index"
              :class="{ 'filter-item-active1': current1 === index }"
          >

            <text>{{ item.title }}</text>
          </view>
        </scroll-view>
      </div>

      <div class="abc def">
        <view class="conclude-title">阵地分类</view>
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation show-scrollbar>
          <view
              class="filter-item"
              @click="swichNavCurrent2(item,index)"
              v-for="(item, index) in list2"
              :key="index"
              :class="{'filter-item-active2': current2 === index }"
          >
            <text> {{ item.title }}</text>
          </view>
        </scroll-view>
      </div>
      <div class="js">
        <selectTab :list="tabList" @select="onSelectTabIndex"></selectTab>
        <vueSearch @confirm="onSearchBlur"  type="a"></vueSearch>
      </div>
      <frontList class="tab-botton"
        :list="dataList"
                 @click="onPartyGroupService"
      ></frontList>
      <u-loadmore :status="status" @loadmore="loadmore" class="paddings" />
    </div>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import frontList from '@/components/frontList/frontList'
  import { mixins1 } from '@/mixins/mixins-1'
  import {getFrontFrom} from '@/common/type'
  import {getGroupUrl} from '@/api/group'
  import {getDictItemstList} from '@/api/dict'
  import vueSearch from '@/components/search'
  import selectTab from '@/components/tabs/tab'
  export default {
    mixins: [mixins1],
    data() {
      return {
        current1: -99, //热门搜索索引
        current2: -99, //阵地分类索引
        list1: [], //热门搜索列表
        list2: [], //阵地分类列表
        typeForm: {}, //
      }
    },
    components: {
      frontList,
      selectTab,
      vueSearch
    },
    onLoad(opt) {
      if (this.groupData.type === 'hot') {
        this.typeForm.column = 'front_clicktimes'
        this.typeForm.order = 'desc'
      } else if (this.groupData.type === 'like') {
        this.typeForm.column = 'front_recordtimes'
        this.typeForm.order = 'desc'
      }
      this.getDictItems('front_from', '1')
      this.getDictItems('front_type', '2')
      this.gpFrontList()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    mounted() {},
    methods: {
      //阵地详情
      onPartyGroupService(item){
        this.getUserInfoValue(result=>{
          if(result){
            this.getGroupUrlCbId(item)
          }
        })
      },
      //直接跳第三方页面
      getGroupUrlCbId({id,frontFrom,frontUrl,frontCode,frontName}){
        this.$clickGpFrontPv({frontCode,frontName})
        return getFrontFrom(getGroupUrl,id,frontFrom,frontUrl)
      },
      //分类和搜索
      async getDictItems(dictCode, type) {
        const { code, result } = await getDictItemstList({
          dictCode,
          sign: '',
        })
        if (code === 0) {
          if (result.length) {
            if (type === '1') {
              this.list1 = result
            } else {
              this.list2 = result
            }
          }
        }
      },
      //阵地接口-分页列表查询
      async gpFrontList() {
        const params = {
          frontType: `*${this.frontType}*`,
          frontFrom: `${this.frontFrom}`,
          column: this.typeForm.column,
          order: this.typeForm.order,
        }
        await this.gpFrontListData(params)
      },
      onSelectTabIndex(index) {
        const typeForm = {}
        if (index === 0) {
          typeForm.column = 'front_clicktimes'
          typeForm.order = 'desc'
        } else if (index === 1) {
          typeForm.column = 'front_clicktimes'
          typeForm.order = 'desc'
        } else {
          this.typeForm = {}
          this.getLocation()
        }
        this.typeForm = typeForm
        this.onRest()
      },
      //点击tab切换
      swichNavCurrent1(item,index) {
        this.current1 = index === this.current1 ? -99 : index

        if (this.current1 === -99) {
          this.frontFrom = ''
        } else {
          this.frontFrom = item.value
        }
        this.onRest()
      },
      swichNavCurrent2(item,index) {
        this.current2 =index === this.current2 ? -99 : index
        if (this.current2 === -99) {
          this.frontType = ''
        } else {
          this.frontType = item.value
        }

        this.onRest()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .classificationSearch {
    .lists{
       .abc{
         &:first-child {
           padding-top: 48rpx;
         }
         &.def{
           padding-bottom: 60rpx;
           padding-top:20rpx;
         }
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         width: 100%;
         flex-direction: row;
         align-items: center;
         overflow: visible;
         white-space: nowrap;
         .conclude-title{
           padding:0 45rpx 0 37rpx;
           font-size: 38rpx;
           font-family: PingFang;
           font-weight: bold;
           color: #222;
         }
         .scroll-view_H{
           width: 100%;
           overflow: scroll;
           .filter-item{
             padding-left: 28rpx;
             padding-right: 28rpx;
             line-height: 62rpx;
             border-radius: 40rpx;
             text-align: center;
             margin-right: 18rpx;
             display: inline-block;
             text{
               font-size: 32rpx;
               font-family: PingFang;
               font-weight: 500;
               color: #222;
             }
             &.filter-item-active1 {
               background: #006be8;
               border-radius: 21rpx;

               text {
                 color: #fff;
                 padding: 10rpx 36rpx;
               }
             }
             &.filter-item-active2 {
               text{
                 font-family: PingFang;
                 color: #3389ED;
                 position: relative;
                 &:after {
                   content: '';
                   position: absolute;
                   left: 25%;
                   bottom: -12rpx;
                   width: 41rpx;
                   height: 3rpx;
                   background: #006be8;
                   border-radius: 1px;
                   transform: translate(-25%, 0);
                 }
               }
             }

           }

         }
       }
    }
    .js {
      height: 109rpx;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      padding: 0 39rpx 0 53rpx;
      align-items: center;
    }
  }
</style>
